<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>待办事项 - 生活管理系统</title>
    <style type="text/css">
        /* 基础样式保持不变 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        :root {
            --primary-color: #3b82f6;
            --secondary-color: #10b981;
            --warning-color: #f59e0b;
            --danger-color: #ef4444;
            --gray-light: #f3f4f6;
            --gray-medium: #e5e7eb;
            --gray-dark: #4b5563;
            --shadow-sm: 0 2px 4px rgba(0,0,0,0.05);
            --shadow-md: 0 4px 6px rgba(0,0,0,0.05);
            --radius: 0.625rem;
            --transition: all 0.3s ease;
        }
        
        /* 导航栏样式保持不变 */
        #navbar{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background:white;
            border-bottom:1px solid var(--gray-medium) ;
            height: 64px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-shadow:var(--shadow-sm);
            padding: 0 2em;
            z-index: 100;
        }
        .n1 span{
            font-size: 20px;
            font-weight: 600;
            color: var(--primary-color);
        }
        .nav-menu{
            margin: 0 2em;
        }
        .nav-menu ul{
            display: flex;
            list-style: none;
            gap: 28px;
        }
        .nav-menu a{
            text-decoration: none;
            color: var(--gray-dark);
            font-size: 16px;
            padding: 8px 0;
            position: relative;
            transition:var(--transition);
        }
        .nav-menu a:hover{
            color: var(--primary-color);
        }
        .nav-menu a::after{
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--primary-color);
            transition: var(--transition);
        }
        .nav-menu a:hover::after{
            width: 100%;
        }
        .nav-menu a.active{
            color: var(--primary-color);
        }
        .nav-menu a.active::after{
            width: 100%;
        }
        .n1{
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .right-actions{
            display: flex;
            align-items: center;
            gap: 24px;
        }
        .notification-btn{
            position: relative;
            background: none;
            border: none;
            font-size: 20px;
            color: var(--gray-dark);
            cursor: pointer;
            transition: var(--transition);
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .notification-btn:hover{
            color: var(--danger-color);
            background-color: var(--gray-light);
        }
        .notification-badge{
            position: absolute;
            top: 2px;
            right: 2px;
            background-color: var(--danger-color);
            color: white;
            font-size: 10px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .user-info{
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 20px;
            transition: var(--transition);
        }
        .user-info:hover{
            background-color: var(--gray-light);
        }
        .user-name{
            font-size: 15px;
            
        }
        .user-image{
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
        }

        /* 主内容区样式 */
        .main{
            padding-top: 5rem;
            padding-bottom: 4rem;
            background-color: #f9fafb;
            min-height: 100vh;
        }
        .main-div{
            padding: 1rem;
            margin: 0 3.75rem;
            max-width: 1400px;
            margin-left: auto;
            margin-right: auto;
        }
        
        /* 待办事项页面特有样式 */
        .todos-page-header {
            margin-bottom: 2rem;
        }
        .todos-page-header h1 {
            font-size: clamp(1.5rem, 3vw, 2.5rem);
            font-weight: 700;
            color: #111827;
            margin-bottom: 0.5rem;
        }
        .todos-stats {
            display: flex;
            gap: 2rem;
            margin-bottom: 1rem;
        }
        .stat-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .stat-number {
            font-weight: 600;
            font-size: 1.2rem;
        }
        .stat-label {
            color: var(--gray-dark);
        }
        
        /* 左右分栏容器 */
        .todos-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2rem;
        }
        
        /* 列表容器添加滚动限制 */
        .completed-todos, .pending-todos {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow-md);
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            max-height: calc(100vh - 160px); /* 限制最大高度 */
        }
        
        /* 列表标题 */
        .list-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 1rem;
            color: #111827;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--gray-medium);
        }
        
        /* 待办事项列表容器 - 添加滚动 */
        .todos-list-container {
            flex: 1;
            overflow-y: auto; /* 内容超出时显示滚动条 */
            margin-top: 1rem;
            padding-right: 8px; /* 防止滚动条遮挡内容 */
        }
        
        /* 待办事项列表 */
        .todos-list {
            list-style: none;
        }
        .todo-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 12px 8px;
            border-bottom: 1px solid var(--gray-light);
            transition: var(--transition);
        }
        .todo-item:hover {
            background-color: var(--gray-light);
        }
        .todo-item:last-child {
            border-bottom: none;
        }
        .todo-checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
        }
        .todo-content {
            flex: 1;
        }
        .todo-text {
            font-size: 16px;
            margin-bottom: 4px;
        }
        .todo-text.completed {
            text-decoration: line-through;
            color: var(--gray-dark);
            opacity: 0.7;
        }
        .todo-date {
            font-size: 12px;
            color: var(--gray-dark);
        }
        .delete-todo {
            background: none;
            border: none;
            color: var(--danger-color);
            cursor: pointer;
            font-size: 16px;
            opacity: 0.7;
            transition: var(--transition);
            padding: 4px;
            border-radius: 4px;
        }
        .delete-todo:hover {
            opacity: 1;
            background-color: rgba(239, 68, 68, 0.1);
        }
        
        /* 空状态 */
        .empty-state {
            color: var(--gray-dark);
            text-align: center;
            padding: 2rem 0;
            border: 1px dashed var(--gray-medium);
            border-radius: var(--radius);
            margin-top: 1rem;
        }
        
        /* 添加待办区域 */
        .add-todo-section {
            margin-top: 1.5rem;
            padding-top: 1.5rem;
            border-top: 1px solid var(--gray-medium);
        }
        .add-todo-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .todo-input-group {
            display: flex;
            gap: 10px;
            margin-bottom: 1rem;
        }
        #new-todo-text {
            flex: 1;
            padding: 10px 12px;
            border: 1px solid var(--gray-medium);
            border-radius: var(--radius);
            font-size: 15px;
        }
        #new-todo-text:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
        }
        #new-todo-date {
            padding: 10px 12px;
            border: 1px solid var(--gray-medium);
            border-radius: var(--radius);
            font-size: 15px;
            color: var(--gray-dark);
        }
        #add-new-todo {
            padding: 0 16px;
            background-color: var(--primary-color);
            color: white;
            border: none;
            border-radius: var(--radius);
            cursor: pointer;
            transition: var(--transition);
        }
        #add-new-todo:hover {
            background-color: #2563eb;
        }
        
        /* 分页控件样式 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid var(--gray-light);
        }
        .pagination-btn {
            padding: 4px 10px;
            border: 1px solid var(--gray-medium);
            border-radius: 4px;
            background-color: white;
            cursor: pointer;
            transition: var(--transition);
        }
        .pagination-btn:hover {
            background-color: var(--gray-light);
        }
        .pagination-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            background-color: white;
        }
        .pagination-info {
            font-size: 14px;
            color: var(--gray-dark);
        }
        
        /* 底部样式 */
        .footer1{
            width: 100%;
            height: auto;
            border-top: 1px solid var(--gray-medium);
            background-color: white;
            padding: 2rem 0;
        }
        .footer2{
            display: flex;
            justify-content:space-between ;
            align-items: center;
            max-width: 1400px;
            margin: 0 auto;
            padding: 0 3.75rem;
            flex-wrap: wrap;
            gap: 1rem;
        }
        .footer-left p{
            color: var(--gray-dark);
            font-size: 14px;
        }
        .footer-right{
            display: flex;
            gap: 1.5rem;
        }
        .footer-right a{
            color: var(--gray-dark);
            text-decoration: none;
            font-size: 14px;
            transition: var(--transition);
        }
        .footer-right a:hover{
            color: var(--primary-color);
        }
        
        /* 响应式调整 */
        @media (max-width: 1024px) {
            .todos-container {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 768px) {
            .main-div, .footer2{
                margin: 0 1rem;
                padding: 0 0.5rem;
            }
            .nav-menu{
                display: none;
            }
            .todo-input-group {
                flex-direction: column;
            }
            #new-todo-date, #add-new-todo {
                width: 100%;
            }
        }
    </style>
</head>
<body>
    <header id="navbar">
        <div class="n1">
            <div class="n1-logo">
                <img src="边牧.png" width="40px"alt="Logo">
            </div>
            <span>生活管理系统</span>
        </div>
        <nav class="nav-menu">
            <ul>
                <li><a href="1.html">仪表盘</a></li>
                <li><a href="#">日程管理</a></li>
                <li><a href="#">财务管理</a></li>
                <li><a href="#">健康记录</a></li>
                <li><a href="todos.html" class="active">待办事项</a></li>
            </ul>
        </nav>
        
        <div class="right-actions">
            <!-- 原有通知按钮 -->
            <button class="notification-btn">
                🔔
                <span class="notification-badge">3</span>
            </button>
        
            <!-- 原有用户信息 -->
            <div class="user-info">
                <div class="user-image">U</div>
                <span class="user-name" id="current-user">用户名</span>
            </div>
        
            <!-- 新增登出按钮 -->
            <button class="notification-btn" id="logout-btn" style="font-size: 16px; padding: 0 10px;">
                登出
            </button>
        </div>
    </header>
    
    <main class="main">
        <div class="main-div">
            <section id="todos-section">
                <div class="todos-page-header">
                    <h1>待办事项管理</h1>
                    <div class="todos-stats">
                        <div class="stat-item">
                            <span class="stat-number" id="total-todos">0</span>
                            <span class="stat-label">总事项</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number" id="pending-todos-count">0</span>
                            <span class="stat-label">未完成</span>
                        </div>
                        <div class="stat-item">
                            <span class="stat-number" id="completed-todos-count">0</span>
                            <span class="stat-label">已完成</span>
                        </div>
                    </div>
                </div>
                
                <div class="todos-container">
                    <!-- 左侧：已完成事项 -->
                    <div class="completed-todos">
                        <div class="list-title">
                            <span>已完成事项</span>
                            <button id="clear-completed" class="delete-todo">清空全部</button>
                        </div>
                        
                        <!-- 添加滚动容器 -->
                        <div class="todos-list-container">
                            <ul class="todos-list" id="completed-todos-list">
                                <div class="empty-state">暂无已完成事项</div>
                            </ul>
                        </div>
                        
                        <!-- 分页控件 -->
                        <div class="pagination" id="completed-pagination">
                            <button class="pagination-btn" id="completed-prev">上一页</button>
                            <span class="pagination-info" id="completed-page-info">第 1 页</span>
                            <button class="pagination-btn" id="completed-next">下一页</button>
                        </div>
                    </div>
                    
                    <!-- 右侧：未完成事项 -->
                    <div class="pending-todos">
                        <div class="list-title">
                            <span>未完成事项</span>
                        </div>
                        
                        <!-- 添加滚动容器 -->
                        <div class="todos-list-container">
                            <ul class="todos-list" id="pending-todos-list">
                                <div class="empty-state">暂无未完成事项</div>
                            </ul>
                        </div>
                        
                        <!-- 分页控件 -->
                        <div class="pagination" id="pending-pagination">
                            <button class="pagination-btn" id="pending-prev">上一页</button>
                            <span class="pagination-info" id="pending-page-info">第 1 页</span>
                            <button class="pagination-btn" id="pending-next">下一页</button>
                        </div>
                        
                        <!-- 添加新待办事项 -->
                        <div class="add-todo-section">
                            <div class="add-todo-title">添加新待办事项</div>
                            <div class="todo-input-group">
                                <input type="text" id="new-todo-text" placeholder="请输入待办事项内容...">
                                <input type="date" id="new-todo-date">
                                <button id="add-new-todo">添加</button>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
    
    <footer>
        <div class="footer1">
            <div class="footer2">
                <div class="footer-left">
                    <p>© 2023 生活管理系统. 保留所有权利.</p>
                </div>
                <div class="footer-right">
                    <a href="#">帮助中心</a>
                    <a href="#">隐私政策</a>
                    <a href="#">使用条款</a>
                </div>
            </div>
        </div>
    </footer>
    
    <script>
		// 登录状态验证 - 页面加载时执行
		document.addEventListener('DOMContentLoaded', function() {
		    // 检查是否已登录，未登录则强制跳转登录页
		    const isLoggedIn = localStorage.getItem('isLoggedIn');
		    if (isLoggedIn !== 'true') {
		        window.location.href = 'login.html';
		        return;
		    }
		
		    // 显示当前登录用户的用户名
		    const currentUser = localStorage.getItem('currentUser');
		    if (currentUser) {
		        // 更新导航栏的用户名
		        document.getElementById('current-user').textContent = currentUser;
		        
		        // 更新仪表盘的欢迎语（仅1.html需要，todos.html可省略）
		        const welcomeTitle = document.querySelector('h1');
		        if (welcomeTitle && welcomeTitle.textContent.includes('欢迎你')) {
		            welcomeTitle.textContent = `欢迎你，${currentUser}`;
		        }
		    }
		
		    // 登出功能
		    document.getElementById('logout-btn').addEventListener('click', function() {
		        if (confirm('确定要退出登录吗？')) {
		            // 清除登录状态
		            localStorage.removeItem('isLoggedIn');
		            localStorage.removeItem('currentUser');
		            // 跳回登录页
		            window.location.href = 'login.html';
		        }
		    });
		
		    // 以下保留原有页面初始化逻辑（如页面切换、日历渲染等）
		    // ---------- 原有代码分割线 ----------
		    const path = window.location.pathname;
		    if (path.endsWith('todos.html')) {
		        // 原有todos页面初始化代码...
		    } else {
		        // 原有仪表盘页面初始化代码...
		    }
		});
        // 共享本地存储数据
        let todoData = JSON.parse(localStorage.getItem('calendarTodos')) || {};
        
        // 分页配置
        const PAGE_SIZE = 8; // 每页显示8条记录
        let paginationState = {
            completed: {
                currentPage: 1,
                totalPages: 1
            },
            pending: {
                currentPage: 1,
                totalPages: 1
            }
        };
        
        // 页面加载时初始化
        document.addEventListener('DOMContentLoaded', function() {
            initTodosPage();
        });
        
        // 初始化待办事项页面
        function initTodosPage() {
            // 日期选择器默认选中今天
            const today = new Date();
            const formattedDate = today.toISOString().split('T')[0];
            document.getElementById('new-todo-date').value = formattedDate;
            
            // 渲染待办事项列表
            renderTodosPage();
            
            // 绑定分页事件
            bindPaginationEvents();
        }
        
        // 渲染待办事项页面
        function renderTodosPage() {
            const allTodos = getAllTodos();
            const completedTodos = allTodos.filter(todo => todo.completed);
            const pendingTodos = allTodos.filter(todo => !todo.completed);
            
            // 更新统计数字
            document.getElementById('total-todos').textContent = allTodos.length;
            document.getElementById('pending-todos-count').textContent = pendingTodos.length;
            document.getElementById('completed-todos-count').textContent = completedTodos.length;
            
            // 更新分页状态
            updatePaginationState('completed', completedTodos.length);
            updatePaginationState('pending', pendingTodos.length);
            
            // 渲染分页数据
            renderPaginatedTodos('completed', completedTodos);
            renderPaginatedTodos('pending', pendingTodos);
            
            // 更新分页控件状态
            updatePaginationUI('completed');
            updatePaginationUI('pending');
            
            // 绑定事件
            bindTodoPageEvents();
        }
        
        // 更新分页状态
        function updatePaginationState(type, totalItems) {
            paginationState[type].totalPages = Math.max(1, Math.ceil(totalItems / PAGE_SIZE));
            // 如果当前页大于总页数，重置为最后一页
            if (paginationState[type].currentPage > paginationState[type].totalPages) {
                paginationState[type].currentPage = paginationState[type].totalPages;
            }
        }
        
        // 渲染分页后的待办事项
        function renderPaginatedTodos(type, todos) {
            const listElement = document.getElementById(`${type}-todos-list`);
            const currentPage = paginationState[type].currentPage;
            
            // 计算当前页的记录范围
            const startIndex = (currentPage - 1) * PAGE_SIZE;
            const endIndex = startIndex + PAGE_SIZE;
            const paginatedTodos = todos.slice(startIndex, endIndex);
            
            // 渲染当前页的记录
            if (paginatedTodos.length === 0) {
                listElement.innerHTML = '<div class="empty-state">暂无相关事项</div>';
            } else {
                listElement.innerHTML = '';
                paginatedTodos.forEach(todo => {
                    const li = document.createElement('li');
                    li.className = 'todo-item';
                    li.innerHTML = `
                        <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''} 
                               data-id="${todo.id}" data-date="${todo.date}">
                        <div class="todo-content">
                            <div class="todo-text ${todo.completed ? 'completed' : ''}">${todo.text}</div>
                            <div class="todo-date">${todo.formattedDate}</div>
                        </div>
                        <button class="delete-todo" data-id="${todo.id}" data-date="${todo.date}">×</button>
                    `;
                    listElement.appendChild(li);
                });
            }
        }
        
        // 更新分页控件UI
        function updatePaginationUI(type) {
            const { currentPage, totalPages } = paginationState[type];
            const prevBtn = document.getElementById(`${type}-prev`);
            const nextBtn = document.getElementById(`${type}-next`);
            const pageInfo = document.getElementById(`${type}-page-info`);
            
            // 更新按钮状态
            prevBtn.disabled = currentPage === 1;
            nextBtn.disabled = currentPage === totalPages;
            
            // 更新页码信息
            pageInfo.textContent = `第 ${currentPage} / ${totalPages} 页`;
            
            // 如果只有一页，隐藏分页控件
            document.getElementById(`${type}-pagination`).style.display = 
                totalPages <= 1 ? 'none' : 'flex';
        }
        
        // 绑定分页事件
        function bindPaginationEvents() {
            // 已完成事项分页
            document.getElementById('completed-prev').addEventListener('click', () => {
                if (paginationState.completed.currentPage > 1) {
                    paginationState.completed.currentPage--;
                    renderTodosPage();
                }
            });
            
            document.getElementById('completed-next').addEventListener('click', () => {
                if (paginationState.completed.currentPage < paginationState.completed.totalPages) {
                    paginationState.completed.currentPage++;
                    renderTodosPage();
                }
            });
            
            // 未完成事项分页
            document.getElementById('pending-prev').addEventListener('click', () => {
                if (paginationState.pending.currentPage > 1) {
                    paginationState.pending.currentPage--;
                    renderTodosPage();
                }
            });
            
            document.getElementById('pending-next').addEventListener('click', () => {
                if (paginationState.pending.currentPage < paginationState.pending.totalPages) {
                    paginationState.pending.currentPage++;
                    renderTodosPage();
                }
            });
        }
        
        // 获取所有待办事项
        function getAllTodos() {
            let allTodos = [];
            Object.keys(todoData).forEach(dateStr => {
                const [year, month, day] = dateStr.split('-').map(Number);
                const formattedDate = `${year}年${month + 1}月${day}日`;
                
                todoData[dateStr].forEach(todo => {
                    allTodos.push({
                        ...todo,
                        date: dateStr,
                        formattedDate: formattedDate
                    });
                });
            });
            // 按日期排序（最近的在前面）
            return allTodos.sort((a, b) => new Date(a.date) - new Date(b.date));
        }
        
        // 绑定待办事项页面的所有事件
        function bindTodoPageEvents() {
            // 切换待办事项状态
            document.querySelectorAll('.todo-checkbox').forEach(checkbox => {
                checkbox.addEventListener('change', function() {
                    const todoId = parseInt(this.dataset.id);
                    const dateStr = this.dataset.date;
                    
                    if (todoData[dateStr]) {
                        const todo = todoData[dateStr].find(t => t.id === todoId);
                        if (todo) {
                            todo.completed = !todo.completed;
                            localStorage.setItem('calendarTodos', JSON.stringify(todoData));
                            // 重置分页到第一页
                            paginationState.completed.currentPage = 1;
                            paginationState.pending.currentPage = 1;
                            renderTodosPage();
                        }
                    }
                });
            });
            
            // 删除单个待办事项
            document.querySelectorAll('.delete-todo').forEach(btn => {
                if (!btn.id) { // 排除“清空全部”按钮
                    btn.addEventListener('click', function() {
                        const todoId = parseInt(this.dataset.id);
                        const dateStr = this.dataset.date;
                        
                        if (todoData[dateStr]) {
                            todoData[dateStr] = todoData[dateStr].filter(t => t.id !== todoId);
                            if (todoData[dateStr].length === 0) {
                                delete todoData[dateStr];
                            }
                            localStorage.setItem('calendarTodos', JSON.stringify(todoData));
                            renderTodosPage();
                        }
                    });
                }
            });
            
            // 清空所有已完成事项
            document.getElementById('clear-completed').addEventListener('click', function() {
                if (confirm('确定要清空所有已完成事项吗？')) {
                    Object.keys(todoData).forEach(dateStr => {
                        todoData[dateStr] = todoData[dateStr].filter(todo => !todo.completed);
                        if (todoData[dateStr].length === 0) {
                            delete todoData[dateStr];
                        }
                    });
                    localStorage.setItem('calendarTodos', JSON.stringify(todoData));
                    paginationState.completed.currentPage = 1;
                    renderTodosPage();
                }
            });
            
            // 添加新待办事项
            document.getElementById('add-new-todo').addEventListener('click', addNewTodo);
            document.getElementById('new-todo-text').addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    addNewTodo();
                }
            });
        }
        
        // 添加新待办事项
        function addNewTodo() {
            const textInput = document.getElementById('new-todo-text');
            const dateInput = document.getElementById('new-todo-date');
            
            const text = textInput.value.trim();
            const date = dateInput.value;
            
            if (!text || !date) {
                alert('请输入待办事项内容和日期');
                return;
            }
            
            // 转换日期格式
            const [year, month, day] = date.split('-').map(Number);
            const dateStr = `${year}-${month - 1}-${day}`;
            
            if (!todoData[dateStr]) {
                todoData[dateStr] = [];
            }
            
            todoData[dateStr].push({
                id: Date.now(),
                text: text,
                completed: false
            });
            
            localStorage.setItem('calendarTodos', JSON.stringify(todoData));
            textInput.value = '';
            // 重置未完成事项分页到第一页
            paginationState.pending.currentPage = 1;
            renderTodosPage();
        }
    </script>
</body>
</html>